<template>
    <div class="ps-main-container">
        <mt-header>
            <div slot="left" @click="reload">mint.me</div>
            <mt-button slot="right">
                <svg class="icon icon-wo" aria-hidden="true">
                    <use xlink:href="#icon-wo"></use>
                </svg>
            </mt-button>
        </mt-header>
        <nav class="ps-city-nav ps-padd">
            <p>当前定位城市：定位不准时，请在城市列表中选择</p>
            <router-link to="/">
                <pr-row >
                    <pr-col>{{guessCity}}</pr-col>
                    <pr-col hor="right">
                        <svg class="icon xiangyoujiantou" aria-hidden="true">
                            <use xlink:href="#icon-xiangyoujiantou"></use>
                        </svg>
                    </pr-col>
                </pr-row>
            </router-link>
        </nav>
        <!--热门城市-->
        <section>
            <h4 class="ps-hot--title">热门城市</h4>
            <ul class="ps-hot__field">
                <router-link tag="li" v-for="item in homeDetail.hotCity" class="ps-hot__ele" :key="item.id" :to="'/city/' + item.id">
                    {{item.name}}
                </router-link>
            </ul>
        </section>
        <!--主要城市-->
        <section>
            <div v-for="(value, key, index) in homeDetail.sortGroupCity" :key="key">
                <h4>{{key}}
                    <span v-if="index == 0">（按字母排序）</span>
                </h4>
                <ul class="ps-hot__field">
                    <router-link v-for="item in value" class="ps-hot__ele" :key="item.id" tag='li' :to="'/city/' + item.id">
                        {{item.name}}
                    </router-link>
                </ul>
            </div>
        </section>
    </div>
</template>
<style lang="less" scoped>
    @import "./../../assets/css/variable_gather";
    .ps-hot--title{
        .line-two();
        .onePxBottomByBg(@dark-border,1px);
        background-color: #ddd;
    }
    .ps-hot__ele{
        .col-3();
        .txt-center();
        .relative();
        .line-two();
        color: @bluer;
        .onePxBottomByBg(@dark-border,1px);
        .onePxRight(@dark-border);
        .singleLimitWidth(25%);
    }
    .ps-hot__field{
        .clear();
    }
</style>
<script>
    import {mapState, mapGetters, mapActions} from 'vuex'
    import {homeUd} from 'store/modules/types'
    import 'util/remex';
    export default{
        data(){
            return{
                guessCity: '上海'
            }
        },
        components:{

        },
        computed:{
            ...mapGetters({
                'homeDetail' : "homeDetailState"
            })
        },
        methods:{
            ...mapActions({
               'initParams': homeUd.A.INIT_PARAMS,
               'hmdGetHotCity': homeUd.A.GET_HOT_CITY,
               'hmdGetGroupCity': homeUd.A.GET_GROUP_CITY
            }),
            //点击图标刷新页面
            reload(){
                RMX.refresh()
            }
        },
        created(){
            this.initParams()
        },
        mounted(){
            this.hmdGetHotCity()
            this.hmdGetGroupCity()
        }

    }
</script>
